<template>
  <div class="log">
    <el-timeline>
      <el-timeline-item
        center
        size="large"
        hollow
        :type="(item.type as any)"
        v-for="item in getlogs"
      >
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item align="center" width="200px"
            ><template #label>
              <div class="cell-item">
                <el-icon><IEpClock></IEpClock></el-icon>
                {{ $t("logs.dataTime") }}
              </div> </template
            >{{ item.dateTime }}</el-descriptions-item
          >
          <el-descriptions-item align="center">
            <template #label>
              <div class="cell-item">
                <el-icon><IEpHelp></IEpHelp></el-icon>
                {{ $t("logs.id") }}
              </div>
            </template>
            {{ item.id }}
          </el-descriptions-item>
          <el-descriptions-item align="center" width="300px">
            <template #label>
              <div class="cell-item">
                <el-icon><IEpUser></IEpUser></el-icon>
                {{ $t("logs.ip") }}
              </div>
            </template>
            {{ item.ip }}
          </el-descriptions-item>
          <el-descriptions-item align="center">
            <template #label>
              <div class="cell-item">
                <el-icon><IEpPriceTag></IEpPriceTag></el-icon>
                {{ $t("logs.type") }}
              </div>
            </template>
            <el-tag size="small" :type="(item.type as any)">
              {{ $t("logs.types." + item.type) }}</el-tag
            ></el-descriptions-item
          >
          <el-descriptions-item align="center">
            <template #label>
              <div class="cell-item">
                <el-icon><IEpDocument></IEpDocument></el-icon>
                {{ $t("logs.content") }}
              </div>
            </template>
            {{ item.content }}
          </el-descriptions-item>
        </el-descriptions>
      </el-timeline-item>
    </el-timeline>
    <div class="sidebar">
      <div>
        <el-tabs type="border-card" stretch>
          <el-tab-pane label="管理" class="pane1">
            <div>
              <el-input v-model="input" placeholder="请输入" clearable>
                <template #prepend>
                  <el-button @click="logSearch()"
                    ><el-icon><IEpSearch></IEpSearch></el-icon
                  ></el-button>
                </template>
                <template #append>
                  <el-select
                    v-model="select"
                    placeholder="请选择"
                    style="width: 115px"
                  >
                    <el-option label="编号" :value="1" />
                    <el-option label="登录IP" :value="2" />
                  </el-select>
                </template>
              </el-input>
            </div>
            <div>
              <el-radio-group v-model="radioType">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="danger">危险</el-radio-button>
                <el-radio-button label="warning">警告</el-radio-button>
                <el-radio-button label="success">普通</el-radio-button>
                <el-radio-button label="info">无关</el-radio-button>
              </el-radio-group>
            </div>

            <div>
              <el-switch
                v-model="Basics.log.isVerification"
                active-text="开启危险操作验证"
                inactive-text="关闭危险操作验证"
              />
            </div>
            <div>
              <el-switch
                v-model="Basics.log.isNotice"
                active-text="开启危险操作通知"
                inactive-text="关闭危险操作通知"
                :disabled="!Basics.log.isVerification"
              />
            </div>
            <el-button
              @click="
                Basics.log.currentStorage < 961
                  ? (Basics.log.currentStorage += 64)
                  : ''
              "
            >
              增加测试
            </el-button>
          </el-tab-pane>
          <el-tab-pane label="预警" class="pane2">
            <el-table
              :data="Basics.log.dangerLogs"
              max-height="440"
              :row-class-name="tableRowClassName"
              border
            >
              <el-table-column type="expand">
                <template #default="props"
                  ><div>
                    <p>{{ props.row.content }}</p>
                    <el-divider></el-divider>
                    <p>{{ props.row.proposal }}</p>
                  </div></template
                ></el-table-column
              >
              <el-table-column label="编号" prop="id" />
              <el-table-column label="登录IP" prop="ip" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div>
        <el-progress
          :width="100"
          :height="100"
          type="dashboard"
          :percentage="
            (Basics.log.currentStorage / Basics.log.totalStorage) * 100
          "
          :color="colors"
          :indeterminate="true"
        >
          <template #default="{ percentage }">
            <el-tooltip class="box-item" effect="dark" placement="bottom">
              <template #content>
                {{ $t("logs.clearStorage") }}
              </template>
              <span @click="Basics.logClearStorage()"
                >{{ Basics.log.currentStorage }}KB</span
              ></el-tooltip
            >
          </template></el-progress
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useBasics } from "../../store/basics";

const Basics = useBasics();
const colors = [
  { color: "#f56c6c", percentage: 100 },
  { color: "#e6a23c", percentage: 80 },
  { color: "#5cb87a", percentage: 60 },
  { color: "#1989fa", percentage: 40 },
  { color: "#6f7ad3", percentage: 20 },
];

const select = ref();
const input = ref("");
const radioType = ref("all");
Basics.log.logsForm = Basics.log.logs;

watch(input, (newValue, oldValue) => {
  if (newValue == "") Basics.log.logsForm = Basics.log.logs;
});

const getlogs = computed(() => {
  if (radioType.value == "all") return Basics.log.logsForm;
  else
    return Basics.log.logsForm.filter(
      (data: { type: string }) =>
        !radioType.value ||
        data.type.toString().includes(radioType.value.toString())
    );
});
const logSearch = () => {
  if ([1, 2].indexOf(select.value) < 0) {
    ElMessage({
      type: "warning",
      message: "请选择查找字段！",
      duration: 500,
    });
    return;
  }
  select.value == 1
    ? (Basics.log.logsForm = Basics.log.logs.filter(
        (data: { id: number }) =>
          !input.value || data.id.toString().includes(input.value.toString())
      ))
    : (Basics.log.logsForm = Basics.log.logs.filter(
        (data: { ip: string }) =>
          !input.value ||
          data.ip.toLowerCase().includes(input.value.toLowerCase())
      ));
};

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any;
  rowIndex: number;
}) => {
  // if (rowIndex % 2 == 0) {
  //   return "danger-row";
  // }
  return "danger-row";
};
</script>
<script lang="ts">
export default {
  // name: "log",
};
</script>

<style scoped lang="scss">
.log {
  position: relative;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  min-height: calc(100% + 20px);

  display: flex;
  .el-timeline {
    width: calc(100% - 422px);
    padding: 20px 10px;
    border-right: 1px solid rgb(230, 230, 230);

    .cell-item {
      display: flex;
      align-items: center;
      justify-content: center;
      .el-icon {
        margin-right: 5px;
      }
    }
  }

  .sidebar {
    position: fixed;
    right: 0px;
    width: 400px;
    height: 90%;
    background-color: #fff;

    display: flex;
    flex-direction: column;

    > div {
      &:first-child {
        flex-grow: 1;
        flex-basis: 0;
        min-height: 500px;
        .el-tabs {
          height: 100%;
          width: 400px;
          border: 0px;
          border-bottom: 1px solid rgb(230, 230, 230);

          overflow: hidden;
          .pane1 > div {
            margin-top: 15px;
          }

          .pane2 {
            :deep(.el-table .danger-row) {
              --el-table-tr-bg-color: var(--el-color-danger-light-9);
            }
          }
        }
      }
      &:last-child {
        height: 200px;
        .el-progress {
          margin: 20px auto;
        }
      }
    }
  }
}
</style>
